<template>
  <div class="tag-wrapper" :style="{ maxWidth: maxWidth }">
    <sec-tag
      v-if="tagList && tagList.length"
      style="margin-right: 4px"
      class="tag-name"
      v-bind="{ ...defaultAttrs, ...$attrs }"
    >
      {{ tagList[0] }}
    </sec-tag>
    <sec-tooltip
      v-if="tagList && tagList.length > 1"
      effect="light"
      placement="bottom-end"
    >
      <div slot="content">
        <div v-for="(item, index) in tagList.slice(1)" :key="index" class="tag">
          <sec-tag v-bind="{ ...defaultAttrs, ...$attrs }">
            {{ item }}
          </sec-tag>
        </div>
      </div>
      <sec-tag v-bind="{ ...defaultAttrs, ...$attrs }">
        +{{ tagList.length - 1 }}
      </sec-tag>
    </sec-tooltip>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    tagList: {
      type: Array,
      default: () => {
        return []
      }
    },
    maxWidth: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      defaultAttrs: {
        'border-color': '#B5C8FF',
        color: '#F3F6FF',
        'text-color': '#3366FF'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tag-wrapper {
  display: flex;
  align-items: center;
  height: 24px;

  .tag-name {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.tag {
  margin-bottom: 4px;
  &:last-child {
    margin: 0;
  }
}

::v-deep .el-tag {
  display: inline-block;
  padding: 3px 8px;
  height: 24px;
  line-height: 18px;
  box-sizing: border-box;
}
</style>
